<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>NiiVue</title>
    <link rel="stylesheet" href="light.css" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
  </head>
  <body>
    <noscript>
      <strong>niivue requires JavaScript.</strong>
    </noscript>
    <header>
      <label for="opacitySlider">Opacity</label>
      <input
        type="range"
        min="0"
        max="255"
        value="255"
        class="slider"
        id="opacitySlider"
      />
      <label for="modulateSlider">Modulation</label>
      <input
        type="range"
        min="1"
        max="4"
        value="2"
        class="slider"
        id="modulateSlider"
      />
      <label for="outlineSlider"> &nbsp; Outline</label>
      <input
        type="range"
        min="0"
        max="5"
        value="1"
        class="slider"
        id="outlineSlider"
      />
      <label for="smoothCheck">&nbsp;&nbsp;Smooth</label>
      <input type="checkbox" id="smoothCheck" unchecked />
      <label for="mode">&nbsp;&nbsp;Display:</label>
      <select name="mode" id="mode">
        <option>anat</option>
        <option>Tstat</option>
        <option>Coef</option>
        <option selected>Alpha-modulated Coef</option>
      </select>
      <button id="extButton">NIfTI Extension</button>
    </header>
    <main>
      <canvas id="gl1"></canvas>
    </main>
    <footer id="location">&nbsp;</footer>
    <script type="module" async>
      import * as niivue from "../dist/index.js"
      opacitySlider.onchange = function () {
        drop.onchange()
      }
      extButton.onclick = function () {
        let str = "Volume does not have an extension"
        if (nv1.volumes[1].hdr.extensions.length > 0) {
          let buf = nv1.volumes[1].hdr.extensions[0].edata
          str = String.fromCharCode.apply(null, new Uint8Array(buf))
        }
        alert(str)
      }
      outlineSlider.oninput = function () {
        nv1.overlayOutlineWidth = this.value;
        nv1.updateGLVolume();
      };
      smoothCheck.onchange = function () {
        nv1.setInterpolation(!this.checked)
        nv1.drawScene()
      }
      modulateSlider.onchange = function () {
        drop.onchange()
      }
      var volumeList1 = [
        { url: "../images/mni152.nii.gz" },
        {
          url: "../images/stats.nv_demo_mskd.nii.gz",
          colormap: "blue2magenta",
          colormapNegative: "blue2cyan",
          frame4D: 1,
          cal_min: 0.01,
          cal_max: 3.3641,
        },
        {
          url: "../images/stats.nv_demo_mskd.nii.gz",
          colormap: "afni_reds_inv",
          colormapNegative: "afni_blues_inv",
          frame4D: 0,
          cal_max: 3.09735,
          cal_min: 0,
        },
      ]
      function handleLocationChange(data) {
        document.getElementById("location").innerHTML =
          "&nbsp;&nbsp;" + data.string
      }
      let defaults = {
        loadingText: "there are no images",
        backColor: [1, 1, 1, 1],
        show3Dcrosshair: true,
        onLocationChange: handleLocationChange,
      }
      var nv1 = new niivue.Niivue(defaults)
      nv1.setInterpolation(true)
      nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS
      await nv1.attachTo("gl1")
      nv1.setSliceType(nv1.sliceTypeMultiplanar)
      await nv1.loadVolumes(volumeList1)
      var drop = document.getElementById("mode")
      drop.onchange = function () {
        let mode = document.getElementById("mode").selectedIndex
        nv1.setOpacity(0, 1.0) //background opaque
        nv1.setOpacity(1, 0.0) //hide tstat
        nv1.setOpacity(2, 0.0) //hide cope
        let visibleOverlay = Math.min(mode, 2)
        let opacity = opacitySlider.value / 255
        nv1.overlayOutlineAlpha = opacity
        nv1.setOpacity(visibleOverlay, opacity)
        nv1.overlayAlphaShader = 1.0
        if (mode === 3) {
          nv1.overlayAlphaShader = opacity
          let modulateAlpha = modulateSlider.value
          nv1.setModulationImage(
            nv1.volumes[2].id,
            nv1.volumes[1].id,
            modulateAlpha
          )
        } else nv1.setModulationImage(nv1.volumes[2].id, '')
      }
      nv1.overlayOutlineWidth = 1
      nv1.volumes[0].colorbarVisible = false //hide colorbar for anatomical scan
      nv1.volumes[1].colorbarVisible = false //hide colorbar for anatomical scan
      nv1.opts.isColorbar = true
      drop.onchange()
      nv1.createOnLocationChange()
    </script>
  </body>
</html>
